<!DOCTYPE html>
<html>
<!-- Author: Cosmo Harrigan -->

<head>
<link href="static/css/style.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<script>
$(function() {

// Configure the socket.io connection address here
var socket = io.connect('http://127.0.0.1:8080/atomspace');

socket.on('connect', function () {
    $('#lines').prepend($('<p>Connected to server.</p>'));
});

function printLine(data, message) {
    atom = jQuery.parseJSON(data).atom;
    $('#lines').prepend($('<p><strong>Handle #' + atom.handle + ' ' + message + ':<br></strong><code>' +
            JSON.stringify(atom, undefined, 1) + '</code></p>'));
}

// Subscribe to the AtomSpace events from socket.io
socket.on('add', function(data) {
    printLine(data, "Atom added");
});

socket.on('remove', function(data) {
    printLine(data, "Atom removed");
});

socket.on('tvchanged', function(data) {
    printLine(data, "TruthValue changed");
});

socket.on('avchanged', function(data) {
    printLine(data, "AttentionValue changed");
});

});

</script>
</head>
<body>
<h2>AtomSpace Event Publisher JavaScript Client Example</h2>
<div id="lines"></div>
</body>
</html>